<template>
  <div>
    <nav>
      <div class="nav_title">Dashboard</div>
      <div class="right_search">
        <div>
          <input type="text" placeholder="search..." />
        </div>
        <a href="javascript:;">
          <span class="iconfont icon-fanggepailie"></span>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-Pathx"></span>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-user"></span>
        </a>
      </div>
    </nav>
    <div>
      <div class="container">
        <div class="tubiao">
          <div class="tu-card">
            <div class="tu-card-bg">
              <div class="tu-card-top">
                <div ref="echarts_left"></div>
              </div>
              <div class="tu-card-text">
                <h4 class="title">Daily Sales</h4>
                <p>
                  <span>55%</span>
                  &nbsp;increase in today's sales
                </p>
              </div>
              <hr class="tu-card-hr" />
              <div class="tu-card-action">
                <span>updated 4 minutes ago</span>
              </div>
            </div>
          </div>

          <div class="tu-card">
            <div class="tu-card-bg">
              <div class="tu-card-top">
                <div ref="echarts_center"></div>
              </div>
              <div class="tu-card-text">
                <h4 class="title">Daily Sales</h4>
                <p>
                  <span>55%</span>
                  &nbsp;increase in today's sales
                </p>
              </div>
              <hr class="tu-card-hr" />
              <div class="tu-card-action">
                <span>updated 4 minutes ago</span>
              </div>
            </div>
          </div>

          <div class="tu-card">
            <div class="tu-card-bg">
              <div class="tu-card-top">
                <div ref="echarts_right"></div>
              </div>
              <div class="tu-card-text">
                <h4 class="title">Daily Sales</h4>
                <p>
                  <span>55%</span>
                  &nbsp;increase in today's sales
                </p>
              </div>
              <hr class="tu-card-hr" />
              <div class="tu-card-action">
                <span>updated 4 minutes ago</span>
              </div>
            </div>
          </div>
        </div>
        <div class="poent">
          <div class="poent-slide">
            <div class="poent-start">
              <div class="poent-ab">
                <span class="iconfont icon-jialihome48"></span>
              </div>
              <div class="ponet-title">
                <p class="ponet-p">Revenue</p>
                <h3 class="ponet-h3">$34,245</h3>
              </div>
              <hr class="tu-card-hr" />
              <div class="tu-card-action">
                <span>Last 24 Hours</span>
              </div>
            </div>
          </div>

          <div class="poent-slide">
            <div class="poent-start">
              <div class="poent-ab">
                <span class="iconfont icon-jialihome48"></span>
              </div>
              <div class="ponet-title">
                <p class="ponet-p">Revenue</p>
                <h3 class="ponet-h3">$34,245</h3>
              </div>
              <hr class="tu-card-hr" />
              <div class="tu-card-action">
                <span>Last 24 Hours</span>
              </div>
            </div>
          </div>

          <div class="poent-slide">
            <div class="poent-start">
              <div class="poent-ab">
                <span class="iconfont icon-jialihome48"></span>
              </div>
              <div class="ponet-title">
                <p class="ponet-p">Revenue</p>
                <h3 class="ponet-h3">$34,245</h3>
              </div>
              <hr class="tu-card-hr" />
              <div class="tu-card-action">
                <span>Last 24 Hours</span>
              </div>
            </div>
          </div>

          <div class="poent-slide">
            <div class="poent-start">
              <div class="poent-ab">
                <span class="iconfont icon-jialihome48"></span>
              </div>
              <div class="ponet-title">
                <p class="ponet-p">Revenue</p>
                <h3 class="ponet-h3">$34,245</h3>
              </div>
              <hr class="tu-card-hr" />
              <div class="tu-card-action">
                <span>Last 24 Hours</span>
              </div>
            </div>
          </div>
        </div>
        <div class="tubiao">
          <div class="tu-card">
            <div class="tu-card-bg">
              <div class="tu-card-top">
                <div class="tu-car-bont">
                  <h4>Employee Stats</h4>
                  <p>New employees on 15th September, 2016</p>
                </div>
              </div>
              <div class="tu-card-text">
                <table class="tu-table">
                  <thead>
                    <tr>
                      <th>
                        <span>ID</span>
                      </th>
                      <th>
                        <span>Name</span>
                      </th>
                      <th>
                        <span>Salary</span>
                      </th>
                      <th>
                        <span>Country</span>
                      </th>
                      <th>
                        <span>City</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Dakota Rice</td>
                      <td>$35,738</td>
                      <td>Niger</td>
                      <td>Oud-Tunrhout</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Dakota Rice</td>
                      <td>$35,738</td>
                      <td>Niger</td>
                      <td>Oud-Tunrhout</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="tu-card">
            <div class="tu-card-bg">
              <div class="tu-card-top">
                <div class="tu-car-bont">
                  <h4>Employee Stats</h4>
                  <p>New employees on 15th September, 2016</p>
                </div>
              </div>
              <div class="tu-card-text">
                <table class="tu-table">
                  <thead>
                    <tr>
                      <th>
                        <span>ID</span>
                      </th>
                      <th>
                        <span>Name</span>
                      </th>
                      <th>
                        <span>Salary</span>
                      </th>
                      <th>
                        <span>Country</span>
                      </th>
                      <th>
                        <span>City</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Dakota Rice</td>
                      <td>$35,738</td>
                      <td>Niger</td>
                      <td>Oud-Tunrhout</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Dakota Rice</td>
                      <td>$35,738</td>
                      <td>Niger</td>
                      <td>Oud-Tunrhout</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Navfooter />
  </div>
</template>
  <script>
  import echarts from "echarts";
  import Navfooter from "@/components/Navfooter";
  export default {
    name: "Dashboard",
    data() {
      return {
        echart_z: null,
        echart_c: null,
        echart_y: null
      };
    },
    components: {
      Navfooter
    },
    methods: {
      getLeft() {
        this.echart_z = echarts.init(this.$refs.echarts_left);
        // 绘制图表
        this.echart_z.setOption({
          color: "rgba(255, 255, 255, 0.8)",
          tooltip: {},
          xAxis: {
            data: ["M", "T", "W", "T", "F", "S", "S"]
          },
          yAxis: {
            max: 45,
            interval: 5
          },
          series: [
            {
              name: "销量",
              type: "line",
              data: [11, 17, 6, 18, 23, 19, 37]
            }
          ]
        });
      },
      getCenter() {
        this.echart_c = echarts.init(this.$refs.echarts_center);
        // 绘制图表
        this.echart_c.setOption({
          color: "rgba(255, 255, 255, 0.8)",
          tooltip: {},
          xAxis: {
            data: [
              "Ja",
              "Fe",
              "Ma",
              "Ap",
              "Mai",
              "Ju",
              "Jul",
              "Au",
              "Se",
              "Oc",
              "No",
              "De"
            ]
          },
          yAxis: {
            max: 900,
            interval: 100
          },
          series: [
            {
              name: "销量",
              type: "bar",
              data: [520, 420, 310, 790, 550, 450, 310, 420, 570, 610, 750, 890]
            }
          ]
        });
      },
      getRight() {
        this.echart_y = echarts.init(this.$refs.echarts_right);
        // 绘制图表
        this.echart_y.setOption({
          color: "rgba(255, 255, 255, 0.8)",
          tooltip: {},
          xAxis: {
            data: ["12am", "3pm", "6pm", "9pm", "12am", "3pm", "6pm", "9pm"]
          },
          yAxis: {
            max: 900,
            interval: 100
          },
          series: [
            {
              name: "销量",
              type: "line",
              data: [210, 750, 450, 300, 280, 240, 200, 190]
            }
          ]
        });
      }
    },
    mounted() {
      this.getLeft();
      this.getCenter();
      this.getRight();
    }
  };
  </script>
<style scoped lang='less'>
nav {
  margin-bottom: 10px;
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  .nav_title {
    font-size: 18px;
  }
  .right_search {
    display: flex;
    input {
      padding: 8px 0;
      outline: none;
      border: 0;
      background-color: transparent;
      border-bottom: 1px solid #000000;
    }
    a {
      display: block;
      padding: 10px 15px;
      span {
        color: #495057;
        font-size: 20px;
      }
    }
  }
}
.container {
  padding: 24px;
  .tubiao {
    display: flex;
    .tu-card {
      flex: 1;
      border-radius: 4px;
      overflow: hidden;
      box-sizing: border-box;
      padding: 0 12px;
      .tu-card-bg {
        border-radius: 4px;
        margin: 25px 0;
        background-color: #fff;
        .tu-card-hr {
          border-color: rgba(0, 0, 0, 0.12);
          border-top: 1px solid #eee;
          margin-left: 20px;
          margin-right: 20px;
          margin-bottom: 1px;
        }
        .tu-card-action {
          margin: 0 20px 0;
          padding: 10px 0 10px;
          span {
            font-size: 12px;
            font-weight: 300px;
            color: #9e9e9e;
          }
        }
      }
      .tu-card-text {
        padding: 16px;
        .tu-table {
          width: 100%;
          tr {
            th {
              padding: 12px 8px;
              color: #ffa726;
              text-align: right;
              &:first-child {
                text-align: left;
              }
              &:nth-child(2) {
                text-align: left;
              }
            }
            td {
              font-size: 14px;
              font-weight: 300;
              text-align: right;
              color: rgba(0,0,0,.87);
              padding: 12px 8px;
              &:first-child {
                text-align: left;
              }
              &:nth-child(2) {
                text-align: left;
              }
            }
          }
        }
      }
      .tu-card-top {
        max-width: calc(100% - 32px);
        position: relative;
        margin: 0 auto;
        top: -20px;
        .tu-car-bont {
          height: 80px;
          box-sizing: border-box;
          padding: 15px;
          background: linear-gradient(60deg, #ffa726, #fb8c00);
          p {
            color: rgba(255, 255, 255, 0.62);
            font-size: 14px;
          }
        }
        div {
          height: 340px;
          border-radius: 6px;
          background: linear-gradient(60deg, #ef5350, #e53935);
        }
      }
      &:first-child .tu-card-top div {
        background: linear-gradient(60deg, #26c6da, #00acc1);
        &.tu-car-bont {
          padding: 15px;
          color: #fff;
          background: linear-gradient(60deg, #ffa726, #fb8c00);
        }
      }
      &:last-child .tu-card-top div {
        background: linear-gradient(60deg, #66bb6a, #43a047);
      }
      .tu-card-text {
        padding: 0 20px 15px;
        line-height: 22px;
        .title {
          margin: 0;
          margin-bottom: 5px;
          font-size: 18px;
          font-weight: 300;
          color: rgba(0, 0, 0, 0.87);
        }
        p {
          margin: 0;
          line-height: 22px;
          color: #999;
          span {
            color: #4caf50;
          }
        }
      }
    }
  }
  .poent {
    display: flex;
    .poent-slide {
      flex: 1;
      padding: 12px;
      .poent-start {
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
        color: rgba(0, 0, 0, 0.87);
        margin: 25px 0;
        position: relative;
        .poent-ab {
          background: linear-gradient(60deg, #66bb6a, #43a047) !important;
          position: absolute;
          top: -20px;
          left: 16px;
          width: 85px;
          height: 85px;
          box-sizing: border-box;
          padding: 15px;
          color: #fff;
          border-radius: 4px;
          box-shadow: 0 12px 20px -10px rgba(76, 175, 80, 0.28),
            0 4px 20px 0px rgba(0, 0, 0, 0.12),
            0 7px 8px -5px rgba(76, 175, 80, 0.2);
          text-align: center;
          span {
            font-size: 36px;
            line-height: 56px;
            width: 56px;
            height: 56px;
          }
        }
        .ponet-title {
          text-align: right;
          padding: 10px 16px 16px;
          .ponet-p {
            color: #9e9e9e;
            font-weight: 300;
            font-size: 14px;
          }
          .ponet-h3 {
            color: rgba(0, 0, 0, 0.87);
            font-weight: 300;
            margin: 0;
          }
        }
        .tu-card-hr {
          border-color: rgba(0, 0, 0, 0.12);
          border-top: 1px solid #eee;
          margin-left: 20px;
          margin-right: 20px;
          margin-bottom: 1px;
        }
        .tu-card-action {
          margin: 0 20px 0;
          padding: 10px 0 10px;
          span {
            font-size: 12px;
            font-weight: 300px;
            color: #9e9e9e;
          }
        }
      }
    }
  }
}
footer {
  border-top: 1px solid #e7e7e7;
  background: transparent;
  padding: 15px 24px;
  height: 82px;
  display: flex;
  justify-content: space-between;
}
</style>
